<template>
  <div class="ratings" ref='ratings'>
    <!--使用better-scroll，滚动的区域需要两个div包裹-->
    <div class="ratings-content">
      <!--评分服务，打星--->
      <div class="overview">
        <!--左侧评分--->
        <div class="overview-left">
          <!--商家评分，通过router-view中seller传递数据-->
          <div class="score">{{seller.score}}</div>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}</div>
        </div>
        <!--右侧星星--->
        <div class="overview-right">
          <!--服务态度--->
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star :size='36' :score='seller.serviceScore'></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <!--商品评分-->
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <star :size='36' :score='seller.foodScore'></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <!--送达时间-->
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <!--分隔间隙--->
      <split></split>
      <!--选择框组件复用-->
      <ratingselect :select-type='selectType'
                    :only-content='onlyContent'
                    :desc='desc'
                    :ratings='ratings'
                    @selecttypechange='typechange'
                    @onlycontentchange='contentchange'
      >
      </ratingselect>
      <!--评价内容--->
      <div class="rating-wrapper">
        <ul>
          <li class="rating-item border-bottom" 
              v-for='(rating,index) in ratings' 
              v-show='needShow(rating.rateType,rating.text)'
              :key='index'
            >
            <!--左侧头像-->
            <div class="avatar">
              <img width='28' height='28' :src="rating.avatar">
            </div>
            <!--右侧内容区块--->
            <div class="content">
              <!--用户名-->
              <h1 class="name">{{rating.username}}</h1>
              <!--几颗星，送达时间--->
              <div class="star-wrapper">
                <star :size='24' :score='rating.score'></star>
                <span class="delivery" v-show='rating.deliveryTime'>{{rating.deliveryTime}}分钟送达</span>
              </div>
              <!--评价正文内容-->
              <p class="text">{{rating.text}}</p>
              <!--赞/不赞，推荐的食物名称--->
              <div class="recommend" v-show='rating.recommend&&rating.recommend.length'>
                <span class="iconfont good" v-if='rateTypes(rating.rateType)'>&#xe616;</span>
                <span class="iconfont bad" v-if='!rateTypes(rating.rateType)'>&#xe612;</span>
                <span class='item' v-for='(item,index) in rating.recommend' :key='index'>{{item}}</span>
              </div>
              <!--评价时间戳-->
              <div class="timer">
                {{rating.rateTime|formatDate}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import axios from 'axios'
import star from '../star/star'
import split from '../split/split'
import ratingselect from '../ratingselect/ratingselect'
import {formatDate} from '../../commen/js/date'

const POSITIVE = 0;//选好评
const NEGATIVE = 1;//选差评
const ALL = 2;//全选

export default {
  name:'ratings',
  props:{
    seller:{
      type:Object
    }
  },
  data(){
    return {
      ratings:[],//通过axios获取
      selectType: ALL,
      onlyContent: false,//只查看有内容的评价
      desc: {
        all: '全部',
        positive: '满意',
        negative: '不满意'
      }
    }
  },
    //vue的过滤器选项{{ 需要过滤的参数 | 过滤函数名formatDate }}
  filters:{
    formatDate(time){
      let date = new Date(time);
      //正则函数formatDate，用于将时间转化为yyyy-MM-dd hh:mm格式的字符串，使用时需要引入{formatDate}，因为该js文件暴露的是一个函数
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  },
  components:{
    star,
    split,
    ratingselect
  },
  methods:{
    //根据选择的评价类型（推荐/吐槽），显示评价内容
    needShow(type,text){
      if(this.onlyContent && !text){
        return false;//点击了‘只看有内容的评价’并且内容为空，即用户评价没有内容不显示，评价列表display:none
      }
      if(this.selectType===ALL){
        return true;//选中‘全部’，显示所有的评价内容
      }else{
        return type===this.selectType;
      }
    },
    //iconfont是赞还是不赞
    rateTypes(type){
      return type===0?true:false
    },
    change(res){
      const data=res.data
      this.ratings=data.ratings
    },
    //父组件改变组件中的数据 ，以此来切换评价的类型
    contentchange(){
      this.onlyContent=!this.onlyContent;
    },
    typechange(type){
      this.selectType=type;
    },
  },
  created(){
    axios.get('/api/data.json')
      .then(this.change)
    this.$nextTick(()=>{
      this.scroll=new BScroll(this.$refs.ratings,{
        click:true
      })
    })
  }
}
</script>

<style lang="stylus" scoped>
.ratings
  position:absolute 
  top:174px 
  bottom:0
  left:0 
  width:100%
  overflow:hidden
  .overview
    display:flex 
    padding:18px 0 
    .overview-left
      flex: 0 0 137px
      width: 137px
      padding:6px 0
      border-right:1px solid rgba(7,17,27,.1)
      text-align:center
      @media only screen and (max-width: 320px)
        flex: 0 0 110px
        width: 110px
      .score 
        margin-bottom:6px
        line-height:28px 
        font-size:24px 
        color:rgb(255,153,0)
      .title 
        margin-bottom:8px
        line-height:12px 
        font-size:12px 
        color:rgb(7,17,27)
      .rank 
        line-height:10px 
        font-size:10px 
        color:rgb(147,153,159)
    .overview-right
      flex:1
      padding: 6px 0 6px 24px
      @media only screen and (max-width: 320px)
        padding-left: 8px
      .score-wrapper
        margin-bottom:8px 
        font-size:0 
        line-height:18px 
        .title 
          display:inline-block 
          vertical-align:top
          //line-height:18px 
          font-size:12px 
          color:rgb(7,17,27)
        .star 
          display:inline-block 
          vertical-align:top
          margin:0 12px
        .score 
          display:inline-block 
          vertical-align:top
          //line-height:18px 
          font-size:12px 
          color:rgb(255,153,0)
      .delivery-wrapper 
        font-size:0px 
        .title 
          font-size:12px 
          line-height:18px 
          color: rgb(7, 17, 27)
        .delivery 
          font-size:12px
          margin-left: 12px
          color: rgb(147, 153, 159)
  .rating-wrapper
    padding:0 18px 
    .rating-item
      display:flex 
      padding:18px 0
      .avatar
        flex:0 0 28px 
        width:28px
        margin-right:12px 
        img 
          border-radius:50%
      .content 
        position:relative 
        flex:1
        .name 
          line-height:12px 
          margin-bottom:4px 
          font-size:10px 
          color:rgb(7,17,27)
        .star-wrapper
          margin-bottom:6px 
          font-size:0
          .star 
            display:inline-block 
            vertical-align:top
            margin-right:6px 
          .delivery
            display:inline-block
            vertical-align:top
            font-size:10px 
            color:rgb(147,153,159)
        .text 
          line-height:18px 
          color:rgb(7,17,27)
          font-size:12px 
          margin-bottom:12px 
        .recommend 
          line-height:16px 
          font-size:0
          .iconfont,.item 
            display:inline-block 
            margin:0 8px 4px 0 
            vertical-align:top
          .iconfont
            color:rgb(0,160,220)
            &.good 
              font-size:9px
            &.bad 
              font-size:18px
          .item 
            padding:0 6px
            border:1px solid rgba(7,17,27,.1)
            border-radius:1px 
            color:rgb(147,153,159)
            background-color:#fff
            font-size:9px
        .timer 
          position:absolute  
          top:0 
          right:0 
          line-height:12px 
          font-size:10px
          color:rgb(147,153,159)
</style>